<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateModal"
      :title="isCreate ? '新增收款账户' : '编辑收款账户'"
      class-name="vertical-center-modal"
      width="650"
    )
      Form.ivu-row.has-rules-item2.ivu-form-basic(ref="formData" :rules="rules" :model="formData" :label-width="120")
        FormItem.form-item.ivu-col(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'input'")
            Input(v-if="item.model == 'payAccount'" v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled" clearable type="number")
            Input(v-else v-model="formData[item.model]" :placeholder="item.placeholder" :disabled="item.isDisabled" clearable)
          template(v-if="item.type === 'select'")
            Select(v-if="item.model == 'type'" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" @on-change="(event, type) => listenCall(item.fn, item.model, event)")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.label") {{c_item.label}}
            Select(v-else-if="item.fn" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" label-in-value @on-change="(event, type) => listenCall(item.fn, item.model, event)")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
            Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
          template(v-if="item.type === 'datePicker'")
            DatePicker.w-100(v-model="formData[item.model]" :placeholder="item.placeholder" type="date" :disabled="item.isDisabled")
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formData[item.model]")
      
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { FinanceApi } from '@/api/Finance.api.js'
import { FinanceCollectingAccountApi } from '@/api/FinanceCollectingAccount.api.js'

export default {
  name: 'CreateModal',

  watch: {
  },

  computed: {
    setFormItem () {
      if (this.formData.type == '客户') {
        this.formItem[1].style = 'ivu-col-span-12 remove-required'
        this.formItem[1].isDisabled = true
        this.formItem[2].style = 'ivu-col-span-12 is-required'
        this.formItem[2].isDisabled = false
        this.formItem[3].style = 'ivu-col-span-12 remove-required'
        // this.formItem[3].isDisabled = true
      } else if (this.formData.type == '集团') {
        this.formItem[1].style = 'ivu-col-span-12 is-required'
        this.formItem[1].isDisabled = false
        this.formItem[2].style = 'ivu-col-span-12 remove-required'
        this.formItem[2].isDisabled = true
        this.formItem[3].style = 'ivu-col-span-12 remove-required'
        // this.formItem[3].isDisabled = true
      } else {
        this.formItem[1].style = 'ivu-col-span-12 remove-required'
        this.formItem[1].isDisabled = true
        this.formItem[2].style = 'ivu-col-span-12 remove-required'
        this.formItem[2].isDisabled = true
        this.formItem[3].style = 'ivu-col-span-12 is-required'
        this.formItem[3].isDisabled = false
      }

      if (this.isCreate) {
        this.formItem[0].isDisabled = false
      } else {
        this.formItem[0].isDisabled = true
      }

      return this.formItem
    },
  },

  data () {
    return {
      isShowCreateModal: false,
      isCreate: true,
      isCanSubmit: true,
      formData: {
        id: null,
        type: null,
        parentID: null,
        companyID: null,
        payUnit: null,
        payCompany: null,
        payAccount: null,
        // inWay: '增加',
        // status: '1',
        // updater: null,
        // updateTime: null
      },
      formItem: [
        { type: 'select', label: '收款单位类型：', placeholder: '请选择收款单位类型', prop: 'type', model: 'type', style: 'ivu-col-span-12 is-required', options: 'CollectionType', fn: 'collectingTypeChange' },
        { type: 'select', label: '集团公司：', placeholder: '请选择集团公司', prop: 'parentID', model: 'parentID', style: 'ivu-col-span-12 is-required', options: 'parentCompanys', isDisabled: false },
        { type: 'select', label: '客户名称：', placeholder: '请选择客户名称', prop: 'companyID', model: 'companyID', style: 'ivu-col-span-12 is-required', options: 'customer', isDisabled: false },
        { type: 'input', label: '收款单位：', placeholder: '请输入收款单位', prop: 'payUnit', model: 'payUnit', style: 'ivu-col-span-12 is-required' },
        { type: 'input', label: '收款单位名称：', placeholder: '请输入收款单位名称', prop: 'payCompany', model: 'payCompany', style: 'ivu-col-span-12 is-required' },
        { type: 'input', label: '收款银行账户：', placeholder: '请输入收款银行账户', prop: 'payAccount', model: 'payAccount', style: 'ivu-col-span-12 is-required' },
        // { type: 'select', label: '入库方式：', placeholder: '请选择入库方式', prop: 'inWay', model: 'inWay', style: 'ivu-col-span-12', options: 'inWayType', isDisabled: true },
        // { type: 'select', label: '状态：', placeholder: '请选择状态', prop: 'status', model: 'status', style: 'ivu-col-span-12', options: 'statusOps' },
        // { type: 'input', label: '创建人：', placeholder: '请输入创建人', prop: 'updater', model: 'updater', style: 'ivu-col-span-12', isDisabled: true },
        // { type: 'datePicker', label: '创建时间：', placeholder: '请输入创建时间', prop: 'updateTime', model: 'updateTime', style: 'ivu-col-span-12', isDisabled: true },
      ],
      rules: {
        type: [{ required: true, message: '请选择收款单位类型', trigger: 'blur' }],
        // payUnit: [{ required: true, message: '请输入收款单位', trigger: 'blur' }],
        payCompany: [{ required: true, message: '请输入收款单位名称', trigger: 'blur' }],
        payAccount: [{ required: true, message: '请输入收款银行账户', trigger: 'blur', pattern: /^[0-9]*$/ }]
      },
      arrListDown: {
        parentCompanys: [],
        // childrenCompanys: [],
        customer: [],
        CollectionType: [],
        // inWayType: [
        //   { label: '导入', value: '导入' },
        //   { label: '增加', value: '增加' }
        // ],
        // statusOps: [
        //   { label: '启用', value: '1' },
        //   { label: '禁用', value: '0' }
        // ]
      },
      selectedParentCompany: null, // 选中的集团
      selectedCompanyInfo: null // 选中的客户
    }
  },

  mounted () {
    this.getEnum()
    this.getParentCompanys()
    this.companys()
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    // 数据字典-获取集团公司
    getParentCompanys () {
      Common.getParentCompanys(this.arrListDown, 'parentCompanys')
    },

    // 获取公司
    async companys () {
      var params = {
        PageIndex: 1,
        PageSize: 10000,
        Args: ''
      }
      Common.companys(params, this.arrListDown, 'customer')
    },

    // 数据字典-获取收款单位类型
    getEnum () {
      let typeName = 'CollectionType'
      Common.getSelectIdList(typeName, this.arrListDown)
    },

    cancel () {
      this.isShowCreateModal = false
    },

    show () {
      this.isCanSubmit = true
      this.isShowCreateModal = true
      this.$refs.formData.resetFields({})
    },

    // 提交表单
    handleSubmit () {
      this.selectedCompanyInfo = this.arrListDown.customer.find(item => {return item.value === this.formData.companyID})
      this.selectedParentCompany  = this.arrListDown.parentCompanys.find(item => {return item.value === this.formData.parentID})
      var params = {        
        ParentName: this.selectedParentCompany ? this.selectedParentCompany.label : '',
        CompanyName: this.selectedCompanyInfo ? this.selectedCompanyInfo.label : ''
      }
      console.log('this.formData: ', {...this.formData, ...params})
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.formData.type == '集团' && !this.formData.parentID) {
            this.$Message.warning('请选择集团')
          } else if (this.formData.type == '客户' && !this.formData.companyID) {
            this.$Message.warning('请选择客户')
          } else if (this.formData.type !== '集团' && this.formData.type !== '客户' && !this.formData.payUnit) {
            this.$Message.warning('请输入付款单位')
          } else {
            this.isCanSubmit = false
            FinanceCollectingAccountApi.postCollectingAccount({...this.formData, ...params}).then(resp=>{
              if (resp.data.success) {
                this.$Message.success(resp.data.message)
                this.isShowCreateModal = false
                this.$emit('query')
              } else {
                this.isCanSubmit = true
                this.$Message.error(resp.data.message)
              }
            })
          }
        } else {
          this.isCanSubmit = true
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取信息
    async getModel (id) {
      var params = {id: id}
      let resp = await FinanceCollectingAccountApi.getInfo(params)
      if (resp.status === 200 && resp.data.success) {
        var result = resp.data.data

        // 相应赋值
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = result[key] ? result[key] + '' : null
        })
        console.log('❤ this.formData: ', this.formData)
      } else {
        this.$Message.error({
          content: resp.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 收款单位类型改变
    collectingTypeChange (model, event) {
      console.log('收款单位类型改变: ', event)
      this.selectedCompanyInfo = null
      this.selectedParentCompany = null
      this.formData.parentID = null
      this.formData.companyID = null
    },
  }
}
</script>

<style lang="less" scoped>

</style>
